import React,{useState} from 'react'
import './imager.css'
import Photo from './photo';

function Imager() {
    const [activeTab, setActiveTab] = useState(0);
    // const [images,setImages]=useState([])

    const tabs = [
        {  label: '图库',content:<Photo/>},
        { label: '最近使用'},
        { label: '收藏'},
    ];

    const handleClick=(index)=>{
        setActiveTab(index);
        console.log(activeTab)
    }

  return (
    <div className='imag-box'>
        {/* 搜索 */}
        <div className='imag-top'>
            <div className='imag-search'>
                <i className='iconfont icon-sousuo'/>
                 <input type="text" placeholder='搜索图片'/>
            </div>
           
        </div>
{/* tab */}
        <div className='imag-center'>
            <div className='imag-tab'>
            <ul>
            {tabs.map((tab, index) => (
                <li key={index} 
                    className={activeTab === index ? 'active' : ''} 
                   onClick={() => handleClick(index)}>
                    <span>{tab.label}</span>
                </li>
            ))}
        </ul>
               
            </div>

            <div className='imag-tab-content'>
            {/* {renderContent()} */}
            {tabs[activeTab].content}
            </div>
        </div>
     
    </div>
  )
}

export default Imager
